<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SUSE软件五班信息采集</title>
<style type="text/css">
body,div,h2,h3,ul,li,p{margin:0;padding:0;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
ul{list-style-type:none;}
body{color:#333;background:#a7ab8c;font:12px/1.5 \5b8b\4f53;}
#msgBox{width:500px;background:#fff;border-radius:5px;margin:10px auto;padding-top:10px;}
#msgBox form h2{font-weight:400;font:400 18px/1.5 \5fae\8f6f\96c5\9ed1;}
#msgBox form{background:url(<%= request.getContextPath() %>/static/imgs/boxBG.jpg) repeat-x 0 bottom;padding:0 20px 20px;}
#userName,#conBox{color:#777;border:1px solid #d0d0d0;border-radius:6px;background:#fff url(<%= request.getContextPath() %>/static/imgs/inputBG.png) repeat-x;padding:3px 5px;font:14px/1.5 arial;}
#userName.active,#conBox.active{border:1px solid #7abb2c;}
#userName{height:20px;width: 200px;margin-top: 3px;}
#conBox{width:448px;resize:none;height:65px;overflow:auto;}
#msgBox form div{position:relative;color:#999;margin-top:10px;}
#msgBox img{border-radius:3px;}
#face{position:absolute;top:0;left:172px;}
#face img{width:30px;height:30px;cursor:pointer;margin-right:6px;opacity:0.5;filter:alpha(opacity=50);}
#face img.hover,#face img.current{width:28px;height:28px;border:1px solid #f60;opacity:1;filter:alpha(opacity=100);}
#sendBtn{border:0;width:112px;height:30px;cursor:pointer;margin-left:10px;background:url(<%= request.getContextPath() %>/static/imgs/ok.png) no-repeat;}
#sendBtn.hover{background-position:0 -30px;}
#msgBox form .maxNum{font:26px/30px Georgia, Tahoma, Arial;padding:0 5px;}
#msgBox .list{padding:10px;}
#msgBox .list h3{position:relative;height:33px;font-size:14px;font-weight:400;background:#e3eaec;border:1px solid #dee4e7;}
#msgBox .list h3 span{position:absolute;left:6px;top:6px;background:#fff;line-height:28px;display:inline-block;padding:0 15px;}
#msgBox .list ul{overflow:hidden;zoom:1;}
#msgBox .list ul li{float:left;clear:both;width:100%;border-bottom:1px dashed #d8d8d8;padding:10px 0;background:#fff;overflow:hidden;}
#msgBox .list ul li.hover{background:#f5f5f5;}
#msgBox .list .userPic{float:left;width:50px;height:50px;display:inline;margin-left:10px;border:1px solid #ccc;border-radius:3px;}
#msgBox .list .content{float:left;width:400px;font-size:14px;margin-left:10px;font-family:arial;word-wrap:break-word;}
#msgBox .list .userName{display:inline;padding-right:5px;}
#msgBox .list .userName a{color:#2b4a78;}
#msgBox .list .msgInfo{display:inline;word-wrap:break-word;}
#msgBox .list .times{color:#889db6;font:12px/18px arial;margin-top:5px;overflow:hidden;zoom:1;}
#msgBox .list .times span{float:left;}
#msgBox .list .times a{float:right;color:#889db6;display:none;}
.tr{overflow:hidden;zoom:1;}
.tr p{float:right;line-height:30px;}
.tr *{float:left;}
</style>

<%@ include file="/WEB-INF/jsps/tag.jsp"%>
<script type="text/javascript" src="${baseurl}static/assets/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
	
	$(function(){
		$("#sendBtn").click(function(){
			var name = $("input[name=name]").val();
			var company = $("input[name=company]").val();
			var telephone = $("input[name=telephone]").val();
			var qqOrEmail = $("input[name=qqOrEmail]").val();
			var workAddress = $("input[name=workAddress]").val();
			var job = $("input[name=job]").val();
			
			if(!name){
				alert("请填写用户名!");
				return ;
			}
			
			if(!telephone){
				alert("请填写电话号码!");
				return;
			}
			
			if(!qqOrEmail){
				alert("请填写qq!");
				return;
			}
			
			if(!company){
				alert("请填写公司名!");
				return;
			}
			
			if(!job){
				alert("请填写职务!");
				return;
			}
			
			if(!workAddress){
				alert("请填写公司地址!")
				return;
			}
			
			$("#formId").submit();
			
		});
		
		$("#pxport").click(function(){
			alert("你不是管理员,请联系管理员。")
		});
	});
	

</script>
<title>SUSE级软件五班</title>
</head>
<body>
<div id="msgBox">
    <form id="formId" action="${baseurl}user/submit" method="post">
        <h2>请同学们, 认真填写相关信息.  当前登陆[${user_in_session.username }]</h2>
        </br>
        sessionId:<span style="color: red;font-size: 30px;"><%=request.getSession().getId() %></span>
        <div>
                                   姓名:<input  name="name"id="userName"  class="f-text" value="" /></br>
                                   电话:<input  name="telephone" id="userName" class="f-text" value="" /></br>
            Q&nbsp;Q:<input name="qqOrEmail" id="userName"  class="f-text" value="" /></br>
                                   公司:<input  name="company" id="userName"  class="f-text" value="" /></br>
                                    职务:<input  name="job" id="userName" class="f-text"  value="" /></br>
            公司地址:<input  name="workAddress" id="userName" class="f-text" style="width: 300px;" value="" /></br>
        </div>
        <div class="tr">
            <p>
                <span class="countTxt">还能输入</span><strong class="maxNum">140</strong><span>个字</span>
                <input id="sendBtn" type="button" value="" title="快捷键 Ctrl+Enter" />
            </p>
        </div>
    </form>
    <div class="list">
        <h3><span>信息列表</span></h3>
        <ul>
        	<c:forEach items="${users}" var="user">
            <li>
                <div class="userPic"><img height="50" width="50" src="<%= request.getContextPath() %>/static/imgs/logo.jpg" /></div>
                <div class="content">
                    <div class="userName"><a href="javascript:;">${user.name }</a>:</div>
                    <div class="msgInfo">公司: ${user.company }</div></br>
                    <div class="msgInfo">职务: ${user.job }</div></br>
                    <div class="msgInfo">电话: ${user.telephone }</div></br>
                    <div class="msgInfo">QQ/Email: ${user.qqOrEmail }</div></br>
                    <div class="msgInfo">地址: ${user.workAddress }</div></br>
                    <div class="times"><span>填写时间: ${user.createTime }</span>&nbsp;&nbsp;&nbsp;  IP:${user.ip }<a class="del" href="javascript:;">删除</a></div>
                </div>
            </li>
            </c:forEach>
            
        </ul>
    </div>	
</div>
<button id="pxport">导出数据</button>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>Copyright © 2011 - 2016 ganbo. All Rights Reserved.</p>
</div>
</body>
</html>
